<template>
    <div>
        <div class="top-div">
            <el-row>
                <el-col :span="2" :push="22">
                    <el-button v-if="$store.state.authList.indexOf('index:menu:save')!=-1"  type="primary"  @click="addMenu()" icon="el-icon-plus">添 加</el-button>
                </el-col>
            </el-row>
        </div>
        <div>
            <el-table
                    :data="tableData"
                    style="width: 100%;margin-bottom: 20px;height: calc( 100vh - 225px )"
                    row-key="id"
                    border

                    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                <el-table-column
                        prop="name"
                        label="名称"
                        align="center"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="permission"
                        label="权限标识"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="path"
                        label="路径">
                </el-table-column>
                <el-table-column
                        align="center"
                        label="操作" width="180">
                    <template slot-scope="scope" >
                        <el-button v-if="$store.state.authList.indexOf('index:menu:del')!=-1" @click="handledelete(scope.row.id)" style="color: #ff0000;"  type="text" size="small">删除</el-button>
                        <el-button v-if="$store.state.authList.indexOf('index:menu:update')!=-1" @click="handleEdite(scope.row)"  type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <menu-form ref="mform"  @query="query()" :visible.sync="dialogVisible"></menu-form>
    </div>
</template>

<script>
    import MenuForm from "./menuForm";
    import modelsApi from "../../api/modelsApi";
    import {mapMutations } from "vuex"
    import util from "../../util/util";
    export default {
        name: "menus",
        components: {MenuForm},
        data() {
            return {
                tableData: [],
                dialogVisible:false
            }
        },
        methods:{
            ...mapMutations(['setModels']),
            async handledelete(id){
                if ( await util.deleteConfirm()){
                    modelsApi.delete(id).then(res=>{
                        this.query()
                    })
                }
            },
            handleEdite(data){
                this.$refs.mform.open(data)
            },
            addMenu(){
                this.$refs.mform.open("")
            },

            query(){
                modelsApi.list().then(res=>{
                    this.setModels(res.data)
                    this.tableData=res.data
                })
            }
        },
        mounted() {
            this.query()
        }
    }
</script>

<style scoped>

</style>